<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=s, initial-scale=1.0">
    <title>当当网</title>
    <link rel="stylesheet" href="./base.css">
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <!-- 头部start -->
    <header>
        <div class="wrap clear">
            <div class="header-left left">
                欢迎光临当当， 请
                <a href="#" style="color: #FF2832;">登录</a>&nbsp;&nbsp;<a href="#">免费注册</a>
            </div>
            <ul class="header-right right clear">
                <li>
                    <a href="#">
                        <i class="shop"></i> 购物车 </a>
                </li>
                <li></li>
                <li><a href="#">我的订单</a></li>
                <li></li>
                <li>
                    <div class="li5 left"></div>
                    <a href="#">
                   当当出版社</a>
                </li>
                <li></li>
                <li>
                    <a href="#">
                        <i class="phone"></i> 手机当当
                    </a>
                </li>
                <li></li>
                <li><a href="#">我的当当 <i class="idown"></i></a></li>
                <li></li>
                <li><a href="#">企业采购<i class="idown"></i></a></li>
                <li></li>
                <li><a href="#">客户服务<i class="idown"></i></a></li>
            </ul>
        </div>
    </header>
    <!-- 头部end -->
    <img src="./img/logo.jpg" alt="">
    <!-- nav导航栏start -->
    <nav>
        <ul class="nav-show">
            <li>部商品分类</li>
            <li></li>
            <li>唯品会</li>
            <li>图书</li>
            <li>电子书</li>
            <li>服装</li>
            <li>运动户外</li>
            <li>婴孕童</li>
            <li>家具</li>
            <li>当当优品</li>
            <li>电器城</li>
            <li>当当超市</li>
            <li>海外购</li>
        </ul>
    </nav>
    <!-- nav 导航栏end -->
    <!-- section strat -->
    <section class="clear">
        <!-- 左侧 -->
        <div class="sec-left left">
            <ul class="tushu clear">
                <h2>图书分类</h2>
                <hr>
                <li class=" clear">

                    <div class="sec-litop">
                        <a href="#">电子书</a>&nbsp;&nbsp;<a href="#">豆瓣原创</a>
                    </div>
                </li>
                <li class=" clear">
                    <div class="sec-litop">
                        <a href="#">小说</a>
                    </div>

                </li>
                <li class=" clear">
                    <div class="sec-litop">
                        <a href="#">文艺</a>
                    </div>
                    <div class="sec-bottom">
                        <a href="">文学</a> <span>|</span> <a href="">传记</a> <span>|</span> <a href="">艺术</a> <span>|</span> <a href="">摄影</a>

                    </div>
                </li>
                <li class=" clear">
                    <div class="sec-litop">
                        <a href="#">青春</a>
                    </div>
                    <div class="sec-bottom">
                        <a href="">青春文学</a> <span>|</span> <a href="">动漫</a> <span>|</span> <a href="">幽默</a>

                    </div>
                </li>
                <li class=" clear">
                    <div class="sec-litop">
                        <a href="#">童书</a>
                    </div>
                    <div class="sec-bottom"> <a href="">0-2</a> <span>|</span> <a href="">3-6</a> <span>|</span> <a href="">7-10</a> <span>|</span> <a href="">11-14</a> <span>|</span> <a href="">科普/百科</a> <span>|</span> <a href="">图画书</a> <span>|</span> <a href="">文字</a>
                    </div>

                </li>
                <li class=" clear">
                    <div class="sec-litop">
                        <a href="#">励志/成功</a>
                    </div>
                </li>
                <li class=" clear">
                    <div class="sec-litop">
                        <a href="#">人文社科</a>
                    </div>
                    <div class="sec-bottom">
                        <a href="">历史</a> <span>|</span> <a href="">古籍</a> <span>|</span> <a href="">哲学/宗教</a> <span>|</span> <a href="">文化</a> <span>|</span> <a href="">政治/军事</a> <span>|</span> <a href="">法律</a> <span>|</span> <a href="">社会科学</a> <span>|</span>                        <a href="">心理学</a>
                    </div>
                </li>
                <li class=" clear">
                    <div class="sec-litop">
                        <a href="#">英文原版书</a><a href="#">港台图书</a>
                    </div>
                </li>
                <li class=" clear">
                    <div class="sec-litop">
                        <a href="#">工具书</a>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 中间 -->
        <div class="sec-middle left clear">
            <div class="sec-mtop">
                <img src="./img/focus.jpg" alt="">
                <ul class="dingwei">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>

            </div>
            <div class="sec-mm">
                <img src="./img/new_book.png" alt="">
            </div>
            <div class="sec-mfoot">
                <ul>
                    <li>
                        <div class="new">
                            <img src="./img/xsq.png" alt="">
                        </div>
                        <img src="./img/book2.jpg" alt="">
                        <p class="book-name"><a href="">来得及</a></p>
                        <p class="name">何炅</p>
                        <p class="price"><span class="new-price">￥40.00</span> <span class="old-price">￥43.30</span></p>
                    </li>
                    <li>
                        <img src="./img/book2.jpg" alt="">
                        <p class="book-name"><a href="">来得及</a></p>
                        <p class="name">何炅</p>
                        <p class="price"><span class="new-price">￥40.00</span> <span class="old-price">￥43.30</span></p>
                    </li>
                    <li>
                        <img src="./img/book2.jpg" alt="">
                        <p class="book-name"><a href="">来得及</a></p>
                        <p class="name">何炅</p>
                        <p class="price"><span class="new-price">￥40.00</span> <span class="old-price">￥43.30</span></p>
                    </li>
                    <li>
                        <img src="./img/book2.jpg" alt="">
                        <p class="book-name"><a href="">来得及</a></p>
                        <p class="name">何炅</p>
                        <p class="price"><span class="new-price">￥40.00</span> <span class="old-price">￥43.30</span></p>
                    </li>
                    <li>
                        <img src="./img/book2.jpg" alt="">
                        <p class="book-name"><a href="">来得及</a></p>
                        <p class="name">何炅</p>
                        <p class="price"><span class="new-price">￥40.00</span> <span class="old-price">￥43.30</span></p>
                    </li>
                    <li>
                        <img src="./img/book2.jpg" alt="">
                        <p class="book-name"><a href="">来得及</a></p>
                        <p class="name">何炅</p>
                        <p class="price"><span class="new-price">￥40.00</span> <span class="old-price">￥43.30</span></p>
                    </li>

                    <li>
                        <img src="./img/book2.jpg" alt="">
                        <p class="book-name"><a href="">来得及</a></p>
                        <p class="name">何炅</p>
                        <p class="price"><span class="new-price">￥40.00</span> <span class="old-price">￥43.30</span></p>
                    </li>
                    <li>
                        <img src="./img/book2.jpg" alt="">
                        <p class="book-name"><a href="">来得及</a></p>
                        <p class="name">何炅</p>
                        <p class="price"><span class="new-price">￥40.00</span> <span class="old-price">￥43.30</span></p>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 右侧 -->
        <div class="sec-foot left clear">
            <div class="common ">
                <h2>最新动态</h2>
                <ul>
                    <li><a href="#">杨绛先生104岁生日快乐</a></li>
                    <li><a href="#">阅享频道：沈从文给家人的83封信</a></li>
                    <li><a href="#">小时代：我用十年青春，赴你最后之约</a></li>
                </ul>
            </div>
            <div class=" new-book">
                <h2>新书预售<a href="#">预售更多</a></h2>
                <div class="slid-box clear">
                    <div class="left">
                        <a href="#"><img src="./img/book.jpg" width="120" height="120" /></a>
                    </div>
                    <div class="left book-info">
                        <p class="book-name">
                            <a href="#">极地重生沙克尔顿南极史诗之旅，探索未知</a>
                        </p>
                        <p class="now-price">￥40.10</p>
                        <p class="old-price">￥68.00</p>
                    </div>
                    <div class="clearfix"></div>
                    </li>
                    </ul>
                </div>
                <ul class="page-box">
                    <li class="on"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <div class="page-left"></div>
                <div class="page-right"></div>
            </div>
            <div class="foot-nav">
                <h2>
                    新书特卖
                </h2>
                <div class="foot-nav1 clear">
                    <div class="fottop">
                        <div>总榜</div>
                        <div>童书</div>
                        <div>励志</div>
                        <div>保健</div>
                        <div>美食</div>
                    </div>
                    <ul class="clear">
                        <li class="clear">
                            <a href="#" class="biaoti left change-color">1</a>
                            <div class="left">
                                <a href="#"><img src="./img/book.jpg" width="120" height="120" /></a>
                            </div>
                            <div class="left book-info" style="width: 60px;">
                                <p class="book-name">
                                    <a href="#">极地重生沙克尔顿南极</a>
                                </p>
                                <p class="now-price">￥40.10</p>
                                <p class="old-price">￥68.00</p>
                            </div>
                        </li>
                        <li>
                            <a href="#" class="biaoti left change-color">2</a>
                            <span>奇幻梦境:一本漫游奇境的手绘</span>
                        </li>
                        <li>
                            <a href="#" class="biaoti left change-color">3</a>
                            <span>奇幻梦境:一本漫游奇境的手绘</span>
                        </li>
                        <li>
                            <a href="#" class="biaoti left change-color">4</a>
                            <span>奇幻梦境:一本漫游奇境的手绘</span>
                        </li>
                        <li>
                            <a href="#" class="biaoti left">5</a>
                            <span>奇幻梦境:一本漫游奇境的手绘</span>
                        </li>

                        <li>
                            <a href="#" class="biaoti left">5</a>
                            <span>奇幻梦境:一本漫游奇境的手绘</span>
                        </li>
                        <li>
                            <a href="#" class="biaoti left">5</a>
                            <span>奇幻梦境:一本漫游奇境的手绘</span>
                        </li>
                        <li>
                            <a href="#" class="biaoti left">5</a>
                            <span>奇幻梦境:一本漫游奇境的手绘</span>
                        </li>
                        <div class="bangdan right">
                            查看完整榜单>>
                        </div>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <!-- section end -->
    <!-- footer start -->
    <footer>
        <hr>

        <div class="foot-link"> <a href="">公司简介</a> <span>|</span> <a href="">Investor Relations</a> <span>|</span> <a href="">诚征英才</a> <span>|</span> <a href="">网站联盟</a> <span>|</span> <a href="">广告服务</a> <span>|</span> <a href="">当当招商</a> <span>|</span> <a href="">机构销售</a>            <span>|</span> <a href="">手机当当</a> <span>|</span> <a href="">官方 Blog</a> <span>|</span> <a href="">热词搜索</a> </div>
        <p class="copy"> Copyright (C) 当当网 2004-2014, All Rights Reserved
            <a href=""><img src="./img/validate.gif" /></a> 京ICP证041189号 出版物经营许可证 新出发京批字第直0673号 </p>

    </footer>
    <!-- footer end -->
</body>

</html>